<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用例测试 | algorithm.js / tree.js</title>
    <script src="../../dist/algorithm.js"></script>
</head>

<body>

    <canvas width='300' height='400'></canvas>

    <script>

        var tree = algorithm.tree({

            // 获取根结点
            root: function (initTree) {
                return initTree[0];
            },

            // 获取孩子结点
            child: function (parentTree, initTree) {
                var children = [], i;
                for (i = 0; i < initTree.length; i++) {
                    if (initTree[i][1] == parentTree[0])
                        children.push(initTree[i]);
                }
                return children;
            },

            // 获取结点标志id
            id: function (initTree) {
                return initTree[0];
            }

        })([

            // 结点名称、父节点名称
            ["手绘", null],
            ["水粉", "手绘"],
            ["油画", "手绘"],
            ["素描", "手绘"],
            ["中国画", "手绘"],
            ["空间透视", "素描"],
            ["色彩五大调", "素描"]

        ]);

        // 绘制

        var painter = document.getElementsByTagName('canvas')[0].getContext('2d');

        painter.fillStyle = 'red';
        painter.textAlign = "center";

        for (var key in tree.node) {
            console.log(tree.node[key]);

            var x = tree.node[key].left * 100;
            var y = tree.node[key].top * 100;

            // 绘制矩形框子
            painter.strokeRect(x - 45, y - 45, 90, 90);

            // 绘制文字
            painter.fillText(tree.node[key].id, x, y);

            // 绘制连线
            if (tree.node[key].pid != null) {
                painter.beginPath();
                painter.moveTo(x, y);
                painter.lineTo(tree.node[tree.node[key].pid].left * 100, tree.node[tree.node[key].pid].top * 100);
                painter.stroke();
            }
        }

    </script>

</body>

</html>